<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/*  相对定位，box2引用一张图片压到box1图片上 */
			div.box1{
				width: 250px;
				height: 250px;
				background: url(img/3..png);
				background-size: 100%;
				/*  申明一个相对定位与方向属性 position: relative;  */
				/* 绝对定位： position: absolute;  left和top置零  */
				position: absolute;
				left: 0px;
				top: 0px;
				/*  堆叠  z-index  针对所有的position 定位  */
				z-index: 100;
			}
			div.box2{
				width: 250px;
				height: 250px;
				background: url(img/2.png);
				background-size: 100%;
				position: absolute;
				left: 0px;
				right: 0px;
				z-index: 101;
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位  相对于父级元素进行定位 
		     功能：给单一元素定位，元素在正常文档流当中    推荐
			 position属性：relative;  声明元素可以使用相对定位意义
			        方向属性： Left（推荐）、right、top（推荐）、bottom
					堆叠顺序属性：z-index
					      属性值数值，数值越大，越靠前
			定位： 绝对定位  依靠定位祖先【页面左上角】进行定位
			功能： 脱离文档流，不占据原来空间
			方向属性和叠加属性和相对以及固定定位共用
			position属性：absolute; 声明元素可以使用绝对定位	
					  
		    实际开发中，相对定位结合绝对定位一起使用
					  侧边栏、左栏、遮罩层【挂靠】
			案例： 左栏弹出（html结构、语义化标签+css两种定位+js）		  
			
			 -->
			 <div class="box1"></div>
			 <div class="box2"></div>
	</body>
</html>